<template>
	<view class="content">
		<view class="topmain">
			<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap"></swiper-tab-head>
		</view>
		<view class="" >
			<view class="wdyf-order" >
				<block v-for="(value,key) in listData" :key="key">
					<view class="wdyf-list"  hover-class="wdyf-atv"  @tap="ondoctTap(value.order_id)">
						<view class="titles">
							<text v-if="value.order_status==0">待提交</text>
							<text v-if="value.order_status==1">待审核</text>
							<text v-if="value.order_status==3">已审核</text>
							<text v-if="value.order_status==4">已拒审</text>
							<text v-if="value.stype==5">投诉</text>
							<text>{{value.good.goods_name}}</text>
							</view>
						<view class="imgbxo">
							<view class="imgbxonr">
								<image :src="value.good.original_img" mode="aspectFill" lazy-load></image>
							</view>
							<view class="wdyf-nr">
								<view class="u-f u-f-ajc u-f-jsb msis">
									<text v-if="value.order_status==0" style="font-size: 12px;">领取时间：{{value.add_time}}</text>
									<text v-if="value.order_status==1" style="font-size: 12px;">提交时间：{{value.shipping_time}}</text>
									<text v-if="value.stype==3" style="font-size: 12px;">备注：{{value.sbz}}</text>
									<text v-if="value.stype==4" style="font-size: 12px;">备注：{{value.sbz}}</text>
								</view>
								<view class="u-f u-f-ajc u-f-jsb msis">
									<text class="qqys" style="font-size: 14px;">+{{value.good.shop_price}}</text>
									<text v-if="value.order_status==1" style="font-size: 12px; background: #f17503; color: #fff; padding:16upx; border-radius: 10upx;" class="qqys">提交审核</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
<!-- 		<view class="no-nr" v-if="tabIndex==1||tabIndex==2">
			<view class="nothing">
				<image src="/static/nothing.png" mode="widthFix"></image>
			</view>
		</view> -->
		
		<!-- 选择类型发布 -->
		<view>
			<uni-drawer :visible="showRigth" mode="right" @close="closeDrawer('right')" >
				<scroll-view :scroll-top="scrollTop" scroll-y="true"  class="scroll-Y" style="padding-bottom: 70px;" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
				<view style="clear: both;"></view>
				<view class="addtitleks">
					请选择任务类型
				</view>
				<view class="tplist" >
					<block v-for="(value,key) in type" :key="key">
						<button class="onzzTapasd" @tap="upontap(value.name)">{{value.name}}</button>
					</block>
				</view>
				<view style="clear: both;"></view>
				</scroll-view>
				<view class="u-f u-f-r" style="width: 100%; position: fixed; bottom: 15px;">
					<button class="onzzTap" type="primary" @tap="onzzTap()">取消</button>
				</view>
			</uni-drawer>
		</view> 
	</view>
</template>


<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import swiperTabHead from "components/user/swiper-tab-headw1.vue";
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
import util from '@/components/amap-wx/js/util.js'
import uniIcon from '@/components/uni-icon/uni-icon.vue'
import {mapState} from 'vuex';//请求数据 mapState
export default {
	components: {
		swiperTabHead,
		uniDrawer,
		util,
		uniIcon
	},
	data() {
		return {
			//导航
			swiperheight: 500,
			tabIndex: 0,
			tabBars: [
				{
					name: "全部",
					id: "dd"
				},
				{
					name: "待审核",
					id: "all"
				},
				{
					name: "已审核",
					id: "yzf"
				},
				{
					name: "已拒审",
					id: "yzf1"
				},
				{
					name: "投诉",
					id: "yzf2"
				}
				
			],
			//选择类型
			scrollTop: 0,
			type: [],
			urerdata:[],
			old: {
				scrollTop: 0
			},
			showRigth: false,
			showLeft: false,
			id:0,
			listData: [],
			reload: true,
			last_id: 0,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多'
			},
		};
	},
	onLoad(e) {
	  this.type=uni.getStorageSync("config").fenlei
	  //console.log(this.type)
	  if(e.id){
	  	this.id=e.id
	  }
	},
	onShow() {
		this.ongrzlTap();
		this.getList();
	},
	
	onReachBottom() {
		this.status = 'more';
		this.getList();
	},
	methods: {
		shenghe(id){
			console.log(id)
		},
		// tabbar点击事件
		tabtap(index) {
			this.tabIndex = index*1
			this.listData=[];
			this.status = 'more';
			this.last_id=0;
			this.getList();
		},
		getList() {
			let data = {
				//column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
			};
			var that=this;
			var limit=10;
			if (this.last_id>0) {
				//说明已有数据，目前处于上拉加载
				this.status = 'loading';
				data.offset = this.last_id*limit;
				data._ = new Date().getTime() + '';
			}
			data.id=this.id
			data.limit=limit
			data.stype=this.tabIndex*1+1			
			data.token = uni.getStorageSync("userInfo").token;
			data.uid = uni.getStorageSync("userInfo").id;
			uni.request({
			//	url: this.config.webUrl+'/api/mytask/tasksh',
			url: that.$serverUrl+'/index.php/Mobile/index/tasksh',
				data: data,
				success: data => {
					//console.log(data.data)
					
						
						this.listData = data.data.list;
					
					
				},
				fail: (data, code) => {
				}
			});
		},
		async ongrzlTap(){
	
		
		
		},
		ondoctTap(id){
			uni.navigateTo({
				url: `/pages/doctor/taskinfosh?id=${id}`
			})
		},
		upontap(id){
			this.closeDrawer('right')
			id = id.replace(/ /g,'')
			uni.navigateTo({
				url: `/pages/user/task/upnr?id=${id}`
			})
		},
		//选择类型发布
		onzzTap(){
			this.hide();
		},
		show(e) {
			if (e === 'left') {
				this.showLeft = true
			} else {
				this.showRigth = true
			}
		},
		hide() {
			this.showLeft = false
			this.showRigth = false
		},
		upper: function(e) {
		},
		lower: function(e) {
		},
		scroll: function(e) {
			this.old.scrollTop = e.detail.scrollTop
		},
		closeDrawer(e) {
			if (e === 'left') {
				this.showLeft = false
			} else {
				this.showRigth = false
			}
		},
		// 监听原生标题导航按钮点击事件
		onNavigationBarButtonTap(e) {
			this.show('right')
		}
	}	
	
}
</script>

<style>
/* page {
		background: url(http://www.scgyly.com/images/ybg.svg);
		background-position: top center;
		background-repeat: no-repeat;
		background-size: 100%;
	} */
	.uni-page-head .uni-page-head-ft{
		background: #fff!important;
		border-radius: 20px!important;
	}
	.onzzTapasd{
		width: 48%;
		height: 36px;
		line-height: 36px;
		font-size: 32upx;
		padding: 0upx;
		margin: 10upx 0;
		margin-left: 1%;
		float: left;
		border-radius: 10upx;
		color: #fff;
		background: #f49315!important;
	}
	.onzzTap{
		height: 36px;
		line-height: 36px;
		font-size: 28upx;
		padding: 0 100upx;
		border-radius: 60upx;
		background: #f49315!important;
	}
	.onokTap{
		height: 36px;
		line-height: 36px;
		font-size: 28upx;
		padding: 0 50upx;
		background: #f17503;
		background: -webkit-linear-gradient(left, #f49315 , #f17503);
		background: -o-linear-gradient(right, #f49315, #f17503);
		background: -moz-linear-gradient(right, #f49315, #f17503);
		background: -webkit-gradient(linear, left top, right top, from(#f49315) , to(#f17503));
		background: -o-linear-gradient(left, #f49315 , #f17503);
		background: linear-gradient(to right, #f49315 , #f17503);
	}
	.addtitleks{
		font-size: 32upx;
		line-height: 44px;
		padding-left: 60upx;
		border-bottom: 1upx solid #e5e5e5;
		position: relative;
		font-weight: bold;
	}
	.addtitleks:after{
		font-family: iconfont;
		position: absolute;
		top: 0px;
		left: 20upx;
		content: '\e6f3';
		font-size: 20px;
		color: #f17503;
	}
	.no-nr{
		width: 100%;
		height: 100upx;
		position: relative;
	}
	.djxis{
		width: 94%;
		margin: 0 auto;
		padding: 20upx 0;
	}
	.gmsx{
		color: #FF5A5F;
		padding-left: 10upx;
		box-sizing: border-box;
	}
	.yesun{
		font-size: 40upx;
		color: #FFAC45;
		font-weight: 500;
	}
	.nothing{
		background: #fff;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		text-align: center;
	}
	.nothing image{
		width: 60%;
		margin: 0 auto;
	}
	.icon-you{
		color: #999;
	}
	.fbboxs{
		border-top: 20upx solid #eee;
		border-bottom: 20upx solid #eee;
		padding: 20upx 3%;
		box-sizing: border-box;
	}
	.bsk2 text{
		background: #FFB400;
		padding: 8upx 40upx;
		color: #111;
		border-radius: 60upx;
		font-size: 28upx;
	}
	.bsk2 text:active{
		background: #FFAC45;
	}
	.bsk2 text:last-child{
		margin-left: 20upx;
	}
.topmain{
	width: 94%;
	margin: 0 auto;
}	
.tsis{
	padding-left: 20upx;
}
.tsis>view:nth-child(1){
	font-size: 16px;
	font-weight: bold;
	color: #111;
	line-height: 30px;
	white-space: nowrap;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	
}
.tsis>view:nth-child(2) text{
	color: #fff;
	background: #FFAC45;
	font-size: 24upx;
	border-radius: 60upx;
	padding: 4upx 20upx;
}
.tsis>view:nth-child(2) text:active{
	background: #BEBEBE;
}
.ytse text:nth-child(2){
	margin-left: 10upx;
}
.mas1{
		background: #FFAC45;
		font-size: 20upx;
		color: #fff;
		margin-right: 20upx;
	}
.spts>view:nth-child(1){
	color: #333;
}
.spts>view:nth-child(2){
	color: #FF5A5F;
}
.spts>view:nth-child(2):active{
	color: #FF1919;
}
.tximg{
	width: 55px!important;
	height: 55px!important;
	border-radius: 50%;
	overflow: hidden;
}	
.content{
	padding-top: 0upx;
	box-sizing: border-box;
}
.msis{
	color: #999;
}
.qqys{
	font-size: 36upx;
	color: #F17503;
	font-weight: 500;
}
.imgbxo{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-content: center;
	align-content: center;
}
.imgbxonr{
	flex:1;
}
.wdyf-nr{
	flex:3;
}
.imgbxonr image{
	width: 55px!important;
	height: 55px!important;
	border-radius: 50%;
	overflow: hidden;
}
.wdyf-list{
	width: 96%;
	overflow:hidden;
	margin: 20upx auto;
	border-radius: 6upx;
	background: #fff;
	padding: 30upx;
	box-sizing: border-box;
	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.09);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.09);
}
.titles text:nth-child(1){
	background: #F17503;
	color: #fafafa;
	font-size: 24upx;
	border-radius: 2px;
	padding: 1px 2px;
}

.titles text:nth-child(2){
	color: #111;
	font-size: 32upx;
	font-weight: bold;
	margin-left: 10upx;
}
.titles{
	padding-bottom: 10upx;
	box-sizing: border-box;
	text-align: justify;
	text-align-last: left;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
</style>
